<template>
	<view style="background-color: #050033;min-height: 100vh;">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#050033'}"></view>
		<uni-nav-bar backgroundColor="#050033;" color="#FFF" :title="$t('language.Schedule')" @clickLeft="goBack" left-icon="left" :border="false" />

		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		<view class="confereceDate">
			<view class="tableMineDate">
				<text class="active" :class="online == 0 ? 'online' : ''"
					@click="onlineClick(0)">{{ $t('language.meeting21') }}</text>
				<text  v-if="TimeTab2.length != 0" :class="online == 1 ? 'online' : ''"
					@click="onlineClick(1)">{{ $t('language.meeting20') }}</text>
			</view>
			<view class="richengBox">
				<view class="meetingTimeTab" v-if="online == 0">
					<view v-bind:style="{ width: TimeTab.length * 190 + 'upx' }">
						<view class="tabClickTime" :class="index == tabOnline ? 'timeActive' : ''"
							v-for="(item, index) in TimeTab" :key="index" @click="chooseTimeTab(index)">{{ item }}
						</view>

					</view>
				</view>
				<view class="meetingTimeTab" v-if="online == 1">
					<view v-bind:style="{ width: TimeTab2.length * 190 + 'upx' }">
						<view class="tabClickTime" :class="index == tabOnline2 ? 'timeActive' : ''"
							v-for="(item, index) in TimeTab2" :key="index" @click="chooseTimeTab2(index)">
							{{ item }}
						</view>
					</view>
				</view>
				<view style="margin-top: 16upx;" v-if="online == 0">{{ schedule_des[tabOnline] }}</view>
				<view style="margin-top: 16upx;" v-else>{{ des[tabOnline2] }}</view>
				<view v-if="online == 0">
					<view class="card-wrap" :class="index == tabOnline ? '' : 'hidden'" v-for="(item, index) in content" :key="index">
						<view class="card" v-for="dayTime in item.morning" :key="dayTime.key">
							<view class="left">
								{{ dayTime.time }}
							</view>
							<view class="card-text">
								<view class="text-item">
									<!-- <image class="img" src="../../static/102.png" mode="aspectFill"></image> -->
									<view class="txt" v-html="$t('language.name') == '中文' ? dayTime.content : dayTime.content_en">
										<!-- {{ $t('language.name') == '中文' ? dayTime.content : dayTime.content_en }} -->
									</view>
								</view>
								<view class="steps-ic"></view>
							</view>
						</view>
						
						<view class="card" v-for="dayTime in item.afternoon" :key="dayTime.key">
							<view class="left">
								{{ dayTime.time }}
							</view>
							<view class="card-text">
								<view class="text-item">
									<!-- <image class="img" src="../../static/102.png" mode="aspectFill"></image> -->
									<view class="txt" v-html="$t('language.name') == '中文' ? dayTime.content : dayTime.content_en">
										<!-- {{ $t('language.name') == '中文' ? dayTime.content : dayTime.content_en }} -->
									</view>
								</view>
								<view class="steps-ic"></view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="online == 1">
					<view class="card-wrap" :class="index == tabOnline2 ? '' : 'hidden'"
						v-for="(item, index) in content2" :key="index">
						<view class="card" v-for="dayTime in item.morning" :key="dayTime.key">
							<view class="left">
								{{ dayTime.time }}
							</view>
							<view class="card-text">
								<view class="text-item">
									<!-- <image class="img" src="../../static/102.png" mode="aspectFill"></image> -->
									<view class="txt" v-html="$t('language.name') == '中文' ? dayTime.content : dayTime.content_en">
										<!-- {{ $t('language.name') == '中文' ? dayTime.content : dayTime.content_en }} -->
									</view>
								</view>
								<view class="steps-ic"></view>
							</view>
						</view>
						
						<view class="card" v-for="dayTime in item.afternoon" :key="dayTime.key">
							<view class="left">
								{{ dayTime.time }}
							</view>
							<view class="card-text">
								<view class="text-item">
									<!-- <image class="img" src="../../static/102.png" mode="aspectFill"></image> -->
									<view class="txt" v-html="$t('language.name') == '中文' ? dayTime.content : dayTime.content_en">
										<!-- {{ $t('language.name') == '中文' ? dayTime.content : dayTime.content_en }} -->
									</view>
								</view>
								<view class="steps-ic"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		schedule
	} from "@/api/user";
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

	export default {
		name: 'ConferenceDate',
		components: {
			uniIcons
		},
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				online: 0,
				tabOnline: 0,
				tabOnline2: 0,
				evenId: '',
				TimeTab: [],
				content: [],
				schedule_des: [],
				TimeTab2: [],
				content2: [],
				des: []
			};
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let evenId = o.evenId;
			this.evenId = evenId;
			this.getInfo();
		},
		methods: {
			async getInfo() {
				const response = await schedule({
					event_id: this.evenId
				});
				if (response.code == 200) {
					this.TimeTab = response.data.schedule.date;
					this.content = response.data.schedule.content;
					this.schedule_des = response.data.schedule.schedule_des;
					this.TimeTab2 = response.data.personal_schedule.date;
					this.content2 = response.data.personal_schedule.content;
					this.des = response.data.personal_schedule.des;
				} else {
					console.log(response.message);
				}
			},
			onlineClick(online) {
				this.online = online;
			},
			chooseTimeTab(index) {
				this.tabOnline = index;
			},
			chooseTimeTab2(index) {
				this.tabOnline2 = index;
			},
			goBack() {
				uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #f0eeed;
	}

	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #050033;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	.tableMineDate {
		display: flex;
		height: 100upx;
		color: #fff;
		justify-content: space-around;
		align-items: center;
		background: #060143;
	}

	.tableMineDate .active {
		color: #fff;
	}

	.tableMineDate text {
		flex: 1;
		height: 100upx;
		text-align: center;
		box-sizing: border-box;
		line-height: 100upx;
		padding: 0 20upx;
		// border-bottom: 4upx solid #fff;
	}

	.tableMineDate text.online {
		background-color: #d3a86a;
		border-bottom: 2upx solid #b88d5b;
	}

	.richengBox {
		padding: 30upx;
	}

	.meetingTimeTab {
		width: 100%;
		height: 70upx;
		// overflow-x: scroll;
		// overflow-y: hidden;
		// -webkit-overflow-scrolling: touch;

	}

	.meetingTimeTab>view {
		display: flex;
		justify-content: space-around;
	}

	.meetingTimeTab::-webkit-scrollbar {
		display: none;
	}

	.meetingTimeTab .tabClickTime {
		// float: left;
		// width: 160upx;
		// height: 60upx;
		// border-radius: 60upx;
		// background: #fff;
		color: #b88d5b;
		text-align: center;
		line-height: 60upx;
		padding: 0 30upx;
		// margin-right: 10upx;
	}

	.timeActive {
		color: #fff !important;
		border: 1upx solid #fff;
		border-radius: 30upx;
	}

	.Time {
		padding: 30upx 0;
	}

	.dayTime {
		padding: 30upx 0;
		border-bottom: 2upx solid #dbdbdb;
		clear: both;
	}

	.morning .dayTime:last-child {
		border-bottom: none;
	}

	.afternoon .dayTime:last-child {
		border-bottom: none;
	}

	.morning {
		border-bottom: 2upx solid #d96932 !important;
	}

	.afternoon {
		border-bottom: 2upx solid #d96932;
	}

	.hidden {
		display: none;
	}

	.dayTime>text:first-child {
		width: 200upx;
		float: left;
		color: #d96932;
		font-weight: bold;
	}

	.dayTime>text:last-child {
		width: 480upx;
		float: left;
		color: #444444;
	}
	
	.card-wrap {
		padding: 60upx 0;
		background-color: #060143;
		border-radius: 8upx;
	}
	
	.card {
		border-radius: 16upx;
		display: flex;
		padding: 0 30upx;
	
		.left {
			width: 210upx;
			display: flex;
			margin-right: 38upx;
			text-align: center;
			flex-shrink: 0;
			font-size: 30upx;
			color: #9b98ba;
			position: relative;
			top: -12upx;
		}
		
		.card-text {
			min-height: 158upx;
			padding-left: 48upx;
			border-left: 2px solid #2f224b;
			position: relative;
			.text-item {
				display: flex;
				align-items: center;
				font-size: 30upx;
				color: #fff;
				line-height: 38upx;
				font-weight: bold;
	
				.img {
					width: 90upx;
					height: 90upx;
					margin-right: 18upx;
					border-radius: 50%;
					flex-shrink: 0;
				}
	
				.txt {
					flex: 1;
					word-break: break-all;
					position: relative;
					top: -12upx;
					padding-bottom: 10upx;
				}
			}
			
			.steps-ic {
			  position: absolute;
			  top: -2upx;
			  left: -14upx;
			  width: 24upx;
			  height: 24upx;
			  background-color: #d3a86a;
			  border-radius: 50%;
			}
		}
		
		&:last-child {
			.card-text {
				min-height: auto;
				border-left: 2px solid transparent;
			}
		 
		}
	}
	
</style>